<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
          个人信息
        </ion-title>
        <ion-buttons slot="end">
          <span>确定</span>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item lines="none" class="tx">
          <ion-label>
            头像
          </ion-label>
          <ion-avatar slot="end" class="avatar">
              <img class="avatar" src="@/assets/images/tx.png">
          </ion-avatar>
          <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline" slot="end" @click="selectImg()"></ion-icon>
        </ion-item>
        <ion-item lines="none">
          <ion-input label="用户名" placeholder="请输入用户名" :readonly="true"></ion-input>
        </ion-item>
        <ion-item lines="none">
          <ion-input label="姓名" placeholder="请输入姓名"></ion-input>
        </ion-item>
        <ion-item lines="none">
          <ion-input label="邮箱" placeholder="请输入邮箱" type="email"></ion-input>
        </ion-item>
        <ion-item lines="none">
          <ion-input label="手机号" placeholder="请输入手机号" :readonly="true"></ion-input>
        </ion-item>
        <ion-item lines="none">
          <ion-input label="所在城市" placeholder="请选择所在城市" :readonly="true"></ion-input>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle , IonPage, IonContent, IonList, IonItem, IonInput, IonLabel, IonIcon, IonAvatar } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { NativeService } from '@/utils/native-service';
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle, IonList, IonItem, IonInput, IonLabel, IonIcon, IonAvatar
  },
  setup() {
    const nativeService = new NativeService();
    const state = reactive({

    })

    onMounted(() => {
      nativeService.startLoc().then((res: any) => {
        console.log(res);
      });
    });

    // startLoc

    function selectImg(){
      nativeService.addImgFile((res: any) => {
        console.log(res);
      })
    }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      selectImg
    }
  }
}
</script>
<style lang="scss" scoped>
ion-content{
  --background: #f4f4f4;
  --padding-top: 10px;
  ion-item{
    font-size: 14px;
    color: #333333;
  }
  ion-input{
    font-size: 14px;
    text-align: right;
  }
}
</style>